<!--小区未匹配-->
<template>
  <div>
    <div class="d-flex wrap">
      <div class="item">端口</div>
      <div class="item">请选择小区</div>
    </div>
    <template v-for="(item, i) in portList">
      <ComManualMatch
        :style="{ 'z-index': portList.length - i, position: 'relative' }"
        :key="item.id"
        :popModel="model[item.portType]"
        :delId="delId"
      ></ComManualMatch>
    </template>
    <div class="tips text-red">注意：输入小区名后需要点击“搜索”按钮</div>
  </div>
</template>
<script>
import ComManualMatch from '@/views/house/com/com-manual-match.vue';
import { mapGetters, mapState } from 'vuex';
import { EVENT_PLATFORM_RESBLOCKID } from './config';

export default {
  components: {
    ComManualMatch,
  },
  shulan: true,
  props: {
    portList: Array,
  },
  data() {
    return {
      model: {},
    };
  },
  created() {
    this.portList.forEach((item) => {
      const m = (this.model[item.portType] = this.getModelByType(item.portType));
      this.$watch(`model.${item.portType}.platformResblockId`, (newVal) => {
        const { portResblockName, portType } = m;
        this.$bus.$emit(EVENT_PLATFORM_RESBLOCKID, newVal, portResblockName, portType);
      });
    });
  },
  mounted() {},
  watch: {},
  computed: {
    ...mapState({
      delId: (state) => state.houseInfo.houDelVO.id,
    }),
  },
  methods: {
    getModelByType(type) {
      return this.$store.getters['houseInfo/getManualAreaModel'](type);
    },
  },
};
</script>
<style scoped>
.wrap{
  padding: 20px 0;
}
.item{
  font-weight: 700;
  vertical-align: middle;
  font-size: 16px;
  color: #606266;
  text-align: center;
  width: 100px;
}

.item:last-child{
  width: 200px;
}

.tips{
  font-size: 14px;
  padding: 20px 0;
}
</style>
